<template>
  <div class="aside">
    <div
      v-for="item in btnList"
      :key="item.type"
      :class="['aside-wrap', { active: listQuery.king == item.type }]"
    >
      <p @click="handleClick(item.type)">
        <span
          :class="
            listQuery.king == item.type
              ? 'el-icon-folder-opened'
              : 'el-icon-folder'
          "
        >
        </span>
        <b>{{ item.title }}</b>
      </p>
      <ul v-show="listQuery.king == item.type" @click="handleShowType">
        <li
          :class="{ active: listQuery.showType == v.value }"
          v-for="v in fileType"
          :key="v.value"
          :data-value="v.value"
        >
          <span :class="v.content"></span>
          {{ v.msg }}
        </li>
      </ul>
    </div>
    <div
      v-if="!netFileSelectFlag"
      :class="['aside-wrap', { active: listQuery.king == 3 }]"
    >
      <p @click="handleClick(3)">
        <span class="el-icon-delete"></span>
        <b>回收站</b>
      </p>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      fileType: [],
      btnList: [
        // { type: 0, title: '文件管理' },
        { type: 1, title: '我的文件' },
        { type: 2, title: '共享文件' },
      ],
      listQuery: {
        pId: 0,
        king: 1,
        del: 1,
        showType: '',
        isPublic: '',
      },
    }
  },
  computed: mapGetters(['netFileSelectFlag']),
  mounted() {
    this.getFileType()
  },
  methods: {
    async getFileType() {
      this.fileType = await this.$store.dispatch(
        'getDictionaryEnumListVal',
        'FILE_TYPE',
      )
    },
    handleClick(v) {
      this.listQuery.pId = '0'
      this.listQuery.king = v
      this.listQuery.del = v == 3 ? 2 : 1
      this.listQuery.showType = ''
      this.listQuery.isPublic = v == 2 ? 1 : ''
      this.$bus.$emit('refreshTbNetDiskList', this.listQuery)
      this.$store.dispatch('setKing', v)
      this.$store.dispatch('setShowType', '')
    },
    handleShowType(e) {
      this.listQuery.showType = e.target.getAttribute('data-value')
      this.listQuery.pId = ''
      this.$store.dispatch('setShowType', this.listQuery.showType)
      this.$bus.$emit('refreshTbNetDiskList', this.listQuery)
    },
  },
}
</script>
<style scoped lang="scss">
.aside {
  .aside-wrap {
    border-bottom: 2px solid #eee;
    p {
      cursor: pointer;
      font-size: 14px;
      line-height: 40px;
      margin: 1px 0;
      padding: 0 5px;
      font-weight: bold;

      span {
        margin-right: 10px;
      }
      b {
        color: #666;
      }
    }
    .clear {
      cursor: pointer;
      color: #999;
      &:hover {
        color: #409eff;
      }
    }
    ul {
      li {
        padding-left: 30px;
        line-height: 36px;
        font-size: 14px;
        cursor: pointer;
        color: #666;
        border-bottom: 1px solid #eee;
        &.active,
        &:hover {
          background-color: #f2faff;
        }
      }
    }
    &.active {
      p {
        b,
        span {
          color: #409eff;
        }
      }
    }
  }
}
</style>